<!-- <div class="common-main-wrap system-wrap">
  <div class="common-main-hd">
    <span class="common-bread-crumb">
      <nz-breadcrumb nzSeparator=">">
        <nz-breadcrumb-item>
          组织结构
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          组织结构设置
        </nz-breadcrumb-item>
      </nz-breadcrumb>
    </span>
    <span class="common-bread-search">
      <button style=" float: right" nz-button [nzType]="'primary'" (click)="addDepartment()">
        添加
      </button>
      <button style="margin-right:20px; float: right" nz-button [nzType]="'primary'" (click)="changeSort()">
        调整结构
      </button>
    </span>

  </div>
  <div class="common-main-cont">

    <div class="common-table-wrap">
      <div class="common-table-cont zzj-scrollbar" style="padding:10px;padding-top:0px;padding-left:0px;">
        <div class="thead">
          <span>组织名称</span>
          <span>职能描述</span>
          <span>部门人数(人)</span>
          <span>操作</span>
        </div>
        <nz-tree [nzData]="status.treeNodes" (nzClick)="nzClick($event)">
          <ng-template #nzTreeTemplate let-node>
            <div class="custom-node" [id]="node.key" [class.active]="status.activedNode?.key===node.key">
              <span class="folder-name   " [ngClass]="nodeItemOverflow" [title]="node.title">
                {{node.origin.title}}
              </span>
              <span class="folder-job hidden-row " [ngClass]="nodeItemOverflow" [title]="node.origin.description">
                {{node.origin.description}}
              </span>
              <span class="folder-company   " [title]="node.origin.memberCount">
                {{node.origin.memberCount}}
              </span>
              <span class="folder-tools">
                <i nz-icon type="form" title="编辑" (click)="editDeparment(node)"></i>
                <i nz-icon type="delete" title="删除" (click)="deleteDepartment(node)"></i>
              </span>
            </div>
          </ng-template>
        </nz-tree>
      </div>
    </div>

  </div>
</div> -->

<div class="department-container">
  <div class="department-head">
    <div class="head-left">
      <a [routerLink]="['/outer/dashboard']" class="breadcrumb">
        工作台
      </a>
      <span style="color: #acacac">
        <i nz-icon type="right" theme="outline"></i>
        组织结构
      </span>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        部门设置
      </b>
    </div>
    <div class="head-right">
      <!-- <div style="width: 200px;  float: right; min-width: 260px;">
            <nz-input-group nzSearch [nzSuffix]="suffixButton">
              <input type="text" nz-input placeholder="请输入关键字" (keyup)="keyupEvent($event)" [(ngModel)]="status.filter" />
            </nz-input-group>
            <ng-template #suffixButton>
              <button nz-button nzType="primary" nzSearch (click)="searchEvent()">搜索</button>
            </ng-template>
          </div> -->
      <button style="margin-right:20px;" nz-button [nzType]="'primary'" (click)="changeSort()">
        调整结构
      </button>
      <button nz-button [nzType]="'primary'" (click)="addDepartment()">
        添加部门
      </button>
    </div>
  </div>

  <div class="department-body zzj-scrollbar">
    <div class="body">
      <div style="padding:10px;padding-top:0px;padding-left:0px;">
        <div class="thead">
          <span>组织名称</span>
          <span>职能描述</span>
          <span>部门人数(人)</span>
          <span>操作</span>
        </div>
        <nz-tree [nzData]="status.treeNodes" (nzClick)="nzClick($event)">
          <ng-template #nzTreeTemplate let-node>
            <div class="custom-node zzj-scrollbar" [id]="node.key" [class.active]="status.activedNode?.key===node.key">
              <span class="folder-name hidden-row long " [ngClass]="nodeItemOverflow" [title]="node.origin.title">
                {{node.origin.title}}
              </span>
              <span class="folder-job hidden-row " [ngClass]="nodeItemOverflow" [title]="node.origin.description">
                {{node.origin.description}}
              </span>
              <span class="folder-company" [title]="node.origin.memberCount">
                {{node.origin.memberCount}}
              </span>
              <span class="folder-tools">
                <i nz-icon class="icon" type="form" title="编辑" (click)="editDeparment(node)"></i>
                <nz-divider nzType="vertical"></nz-divider>
                <i nz-icon class="icon" type="delete" title="删除" (click)="deleteDepartment(node)"></i>
              </span>
            </div>
          </ng-template>
        </nz-tree>
      </div>
    </div>
  </div>


  <!-- 弹出框（拖动排序） -->
  <nz-modal [(nzVisible)]="status.ischangeSort" (nzClick)="nzClick($event)" [nzFooter]="modalFooter1"
    (nzOnCancel)="status.ischangeSort=false" nzTitle="拖动结构完成移动" [nzStyle]="{ top: '300px' }">
    <nz-tree #treeCom [nzData]="status.treeNodes" nzDraggable="true" [nzBeforeDrop]="beforeDrop"
      (nzOnDragStart)="nzEvent($event)" (nzOnDragEnter)="nzEvent($event)" (nzOnDragLeave)="nzEvent($event)"
      (nzOnDrop)="nzEvent($event)" (nzOnDragEnd)="nzEvent($event)">
    </nz-tree>
    <ng-template #modalFooter1>
      <span></span>
      <!-- <button nz-button nzType="default" (click)="status.ischangeSort=false">取消</button> -->
      <button nz-button nzType="primary" (click)="saveSort()" [nzLoading]="isOkLoading">保存结构</button>
    </ng-template>
  </nz-modal>



  <!-- 弹出框（新增，修改） -->
  <nz-modal [(nzVisible)]="status.ismodify || status.isedit" (nzClick)="nzClick($event)" [nzFooter]="modalFooter"
    (nzOnCancel)="cancelAddOredit()" [nzTitle]="status.ismodify?'添加组织':'修改组织'" [nzStyle]="{ top: '300px' }">

    <div nz-row>
      <label nz-col nzSpan="4" style="line-height: 32px">组织名称：</label>
      <input maxlength="30" nz-col nzSpan="20" nz-input [(ngModel)]="status.title" style="width: 60%; margin-right:8px;"
        placeholder="请输入组织名称"> <span style=" color:red;vertical-align: super;">*</span>
    </div>
    <div nz-row style="margin-top:20px">
      <label nz-col nzSpan="4" style="line-height: 32px">职能描述：</label>
      <textarea maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="status.description" style="width: 60%;height: 100px;
       margin-right:8px;" placeholder="请输入50字以内职能描述"></textarea>
    </div>
    <ng-template #modalFooter>
      <span></span>
      <!-- <button nz-button nzType="default"
      (click)="(status.ismodify=false) || (status.isedit=false && status.title=null && status.description=null)">取消</button> -->
      <button nz-button nzType="primary" (click)="status.ismodify?saveDepartment(): editSave(node)"
        [nzLoading]="isOkLoading">保存</button>
    </ng-template>
  </nz-modal>


  <!-- 弹出框（删除） -->
  <!-- <nz-modal [(nzVisible)]="status.isDelete" nzTitle="删除组织" nzOkText="确定" nzCancelText="取消" (nzOnOk)="delNode()"
  (nzOnCancel)="Canceldel()">
  <p>确定删除 {{status.title}} 吗？</p>
  <p style="color:red">删除后不能恢复，请谨慎操作。</p>
</nz-modal> -->
</div>